<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点击禁用</button>
    <script>
    // 1.call的应用
        const obj = {
            name:'张三',
            age:19
        }
        function fn(a,b){
            console.log(this);
            console.log(a + b);
        }
        //call立即执行，并且可以改变函数的this指向，使其指向obj，和传递参数
        fn.call(obj,1,2)  
        // call的主要作用是可以实现继承
        function Father(uname,age,sex){
            this.uname = uname
            this.age = age
            this.sex = sex
        }
        function Son(uname,age,sex){
            Father.call(this,uname,age,sex) //将Father中的this修改为Son里面的this
        }

        const son = new Son('张三',18,'男')
        console.log(son);
    // 2.apply的应用
        const obj1 = {
            age:90
        }
        function fnc(arr){
            console.log(this);
            console.log(arr);  //打印出的是字符串
        }
        // 也可以立即调用函数，能改变this的指向，但是它的参数必须是数组（伪数组）
        fnc.apply(obj1,['pink'])
        // apply的主要应用:比如利用apply借助于数学内置对象求最大值
        const arr = [1,66,3,99,56,233]
        const max = Math.max.apply(Math,arr)
        console.log(max);
    // 3.bind的应用
        const obj2 = {
            age:888
        }
        function func(a,b){
            console.log(this);
            console.log(a*b);
        }
        const f = func.bind(obj2,3,2)
        // bind不能立即调用原来的函数，但可以改变原函数内部的this指向，返回的是原函数改变thsi之后产生的新函数
        f()
        // 具体应用：希望可以点击按钮后会禁用按钮，3秒后开启
        const btn = document.querySelector('#btn')
        // btn.onclick = function(){
        //     this.disabled = true
        //     setTimeout(function(){
        //         console.log(this);
        //         this.disabled = false
        //     }.bind(this),3000)
        // }

        btn.addEventListener('click',function(){
            this.disabled = true
            setTimeout(function(){
                // console.log(this);
                this.disabled = false
            }.bind(this),3000)
        })
    
    </script>
</body>
</html>